﻿@using RuoVea.OmiUser
@using RuoVea.OmiUser.Attributes
@using RuoVea.OmiUser.Options
@{
    Layout = "";
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(RuoVea.OmiUser.Language.i18n.user_management)</title>
    <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <style>.el-button [class*="el-icon-"] + span { margin-left: 1px !important; } .el-scrollbar__wrap, .el-aside {overflow: hidden; } </style>
</head>
<body>
    <div id="app" v-cloak>
        <el-container>
                <avue-crud :data="tableData" :option="option" :page.sync="pageOption" :table-loading="loading"
                           v-on:refresh-change="refreshChange"
                           v-on:row-save="handleRowSave"
                           v-on:row-update="handleRowUpdate"
                           v-on:row-del="handleRowDel"
                           v-on:search-change="searchChange"
                           v-on:search-reset="resetChange"
                           :cell-style="cellStyle"
                           v-on:on-load="onLoad">
                    <template slot="avatar" slot-scope="scope">
                        <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}} </el-avatar>
                    </template>
                    <template slot="record" slot-scope="scope">
                        <modify-record :data="scope.row"></modify-record>
                    </template>

                    <template slot-scope="{type,size,row,index}" slot="menu">
                    <el-button icon="el-icon-key" :size="size" :type="type" @@click="handleResetPwd(row,index)" v-if="option.resetPwdBtn">{{i18n.t('reset_password')}}</el-button>
                    </template>
                </avue-crud>
        </el-container>
    </div>

    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>

    <script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {

                    name: "user",
                    pageUrl: "/user/pages",
                    addUrl: "/user/add",
                    editUrl: "/user/update",
                    deleteUrl: "/user/delete",

                    option: {
                        searchShowBtn: Permissions.avePermission(`sysUser:page`),
                        refreshBtn: Permissions.avePermission(`sysUser:page`),

                        addBtn: Permissions.avePermission(`sysUser:addUser`),
                        editBtn: Permissions.avePermission(`sysUser:updateUser`),
                        delBtn: Permissions.avePermission(`sysUser:deleteUser`),
                        viewBtn: Permissions.avePermission(`sysUser:userById`),
                        resetPwdBtn: Permissions.avePermission(`sysUser:resetPwd`),

                        menuWidth: '350',
                        rowKey: 'id',
                        searchShow: false,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            { prop: "avatar", label: `${this.i18n.t('avatar')}`, slot: true, display: false, width: '70', editDisplay: false, addDisplay: false },
                            { prop: "account", label: `${this.i18n.t('account')}`, search: true, hide: false, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "password", label: `${this.i18n.t('password')}`, search: false, hide: false, viewDisplay: false, type: "password", editDisplay: false, hide: true, showColumn: false, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}`, }], },
                            { prop: "nickName", label: `${this.i18n.t('nickname')}`, search: false, hide: false, type: "input", rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "realName", label: `${this.i18n.t('full_name')}`, search: true, hide: false, type: "input", rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "sex", label: `${this.i18n.t('gender')}`, search: false, hide: false, value: 3, type: "radio", button: true, dicData: [{ label: `${this.i18n.t('male')}`, value: 1, }, { label: `${this.i18n.t('female')}`, value: 2, }, { label: `${this.i18n.t('unknown')}`, value: 3, }], width: '80', },
                            { prop: "isDisable", label: `${this.i18n.t('status')}`, search: false, hide: false, value: 0, type: "radio", button: true, dicData: disableDicData, width: '80', },
                            { prop: "phone", label: `${this.i18n.t('mobile')}`, search: true, hide: false, type: "input" },
                            { prop: "email", label: `${this.i18n.t('email')}`, search: false, hide: false, type: "input" },
                            { prop: "tel", label: `${this.i18n.t('phone')}`, search: false, hide: false, type: "input" },
                            { prop: "lastLoginIp", label: `${this.i18n.t('last_login_ip')}`, value: null, search: false, hide: false, type: "input", display: false, showColumn: false, },

                            // { prop: "lastLoginTime", label: `${this.i18n.t('last_login_time')}`,value:null, search: false, hide: false, type: "input", display: false, },
                            { prop: "remark", label: `${this.i18n.t('note')}`, type: 'textarea', hide: true, showColumn: false, span: 24, rows: 2, },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false,width: 140, },
                        ],
                    },
                    
                }
            },
            created() {
                this.selectRow = {};
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 6) {
                        if (row.isDisable == 0) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
                handleResetPwd(row) {
                    this.$confirm(`${this.i18n.t('confirm_reset_password')}`, this.i18n.t('tips'), { confirmButtonText: this.i18n.t('determine'), cancelButtonText: this.i18n.t('cancel'), type: 'error', customClass: "elmessagebox" })
                        .then(() => {
                            let data = { Id: row.id };
                            this.$http.post("/user/resetuserpwd", data).then((res) => {
                                if (res == true) {
                                    this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                                }
                            });
                        }).catch(_ => { console.info(_); })
                },
            }
        });
    </script>
</body>
</html>